<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin:20px">
            <div class="homepage-header">
                <div>
                    <img :src="userStore.userInfo.avatar" alt="" class="homepage-header-leftimg">
                </div>
                <div class="homepage-header-right">
                    <div class="homepage-header-right-title">
                        <span>欢迎回来，{{ userStore.userInfo.username }}</span>
                    </div>
                    <div class="homepage-header-right-time">
                        <span>大M后台管理平台</span>
                    </div>
                </div>
            </div>

        </el-card>
    </div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/modules/user';

const userStore = useUserStore()

</script>
<style scoped lang="less">
.homepage-header {
    display: flex;
    justify-content:start;
    align-items: center;
    .homepage-header-leftimg {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    .homepage-header-right {
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        .homepage-header-right-title {
            font-size: 20px;
            font-weight: bold;
        }
        .homepage-header-right-time {
            font-size: 14px;
            color: #999;
        }
    }
}
</style>
